<script setup>
import { ElContainer, ElHeader, ElMain, ElFooter } from 'element-plus'
import { RouterView } from 'vue-router'
import AsideView from '@/components/AsideView.vue';
</script>

<template>
    <el-container class="sd-container">
        <el-aside width="200px">
            <AsideView />
        </el-aside>
        <el-container>
            <el-header>Header</el-header>
            <el-main>
                <RouterView />
            </el-main>
            <el-footer>Footer</el-footer>
        </el-container>
    </el-container>
</template>

<style scoped>
.sd-container {
    height: 100vh;
}

.el-aside {
    background-color: #D9ECFF;
}

.el-header {
    background-color: #C6E2FF;
}

.el-main {
    background-color: #ECF5FF;
}

.el-footer {
    background-color: #C6E2FF;
}
</style>